<template>
    <div class="app-container">
        <div class="header-wrap">
          <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="120px">

              <el-form-item label="项目名称&ID" prop="projectName">
                <el-input v-model="queryForm.projectName" placeholder="请输入项目名称或项目ID" clearable size="small" style="width: 240px" @keyup.enter.native="getInformationList" />
              </el-form-item>

              <el-form-item label="国家/区域" prop="country">
                <el-select v-model="queryForm.country" placeholder="国家" @change="selectCountry" style="width: 120px">
                  <el-option v-for="(val,key,index) in countryList" :label="key" :value="key" :key="index"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="city">
                <el-select v-model="queryForm.city" placeholder="区域" style="width: 120px;margin-left: 20px">
                  <template v-for="(val,key) in countryList" :label="key" :value="key">
                    <template v-if="key == queryForm.country">
                      <el-option v-for="(item,key) in val" :label="item.cityName" :value="item.cityName" :key="key"></el-option>
                    </template>
                  </template>
                </el-select>
              </el-form-item>

               <el-form-item label="项目状态" prop="projectStatus">
                <el-select v-model="queryForm.projectStatus" style="width: 120px" placeholder="请选择" clearable size="small">
                  <el-option
                      v-for="item in projectStatusList"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="物业类型" prop="propertyType">
                <el-select v-model="queryForm.propertyType" style="width: 120px" placeholder="请选择" clearable size="small">
                  <el-option
                      v-for="item in propertyTypeList"
                      :key="item.dictCode"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                  />
                </el-select>
              </el-form-item>            

              <el-form-item style="margin-left: 80px">
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getProjectList">搜索</el-button>
              </el-form-item>
          </el-form>
        </div>

        <!--  :row-key="getRowKeys"  @selection-change="handleSelectionChange" -->
        <el-table :data="projectList" v-loading="loading" style="width: 100%" border  >

          <el-table-column label="项目ID" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.projectId }}</span>
              </template>
          </el-table-column>

          <el-table-column label="项目名称" align="center">
            <template slot-scope="scope">
               <span>{{ scope.row.projectName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="国家" width="150" align="center">
            <template slot-scope="scope">
               <span>{{ scope.row.country }}</span>
            </template>
          </el-table-column>

          <el-table-column label="区域" width="150" align="center">
            <template slot-scope="scope">
               <span>{{ scope.row.city }}</span>
            </template>
          </el-table-column>

          <el-table-column label="物业类型" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.propertyType }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建项目时间" align="center">
            <template slot-scope="scope">
              <span style="white-space: pre" v-if="scope.row.projectStatus != 0">{{ scope.row.createTime ? scope.row.createTime : '-' }}</span>
              <span style="white-space: pre" v-if="scope.row.projectStatus == 0">-</span>
            </template>
          </el-table-column>

          <el-table-column label="最后编辑时间" align="center">
            <template slot-scope="scope">
              <span style="white-space: pre" v-if="scope.row.projectStatus != 0">{{ scope.row.updateTime ? scope.row.updateTime : '-' }}</span>
              <span style="white-space: pre" v-if="scope.row.projectStatus == 0">-</span>
            </template>
          </el-table-column>

          <el-table-column label="项目状态" align="center" width="150">
            <template slot-scope="scope">
              <span>{{ projectStatus[scope.row.projectStatus] }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  @click="navigateToEdit(scope.row)"
                 >
                  编辑
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  v-if="scope.row.projectStatus == 1 || scope.row.projectStatus == 3"
                  @click="saveOnTheShelfId(scope.row.id, scope.row.bannerCount)"
                  >
                  上架
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  v-if="scope.row.projectStatus == 2"
                  @click="saveOffTheShelfId(scope.row.id)"
                  >
                  下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="projectList.length > 0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.rows" @pagination="getProjectList" />

        <!-- 没有维护相册图片时的强提示 -->
        <el-dialog
          title="温馨提示"
          :visible.sync="noPhotoAlbum"
          width="20%"
          style="margin-top: 20vh"
          :before-close="handleClose">
          <span>请维护项目相册后, 再点击上架。</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="noPhotoAlbum = false">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 上架强提示 -->
        <el-dialog
          title="温馨提示"
          :visible.sync="onShelfStatus"
          width="20%"
          style="margin-top: 20vh"
          :before-close="handleClose">
          <span>您确定要上架此项目吗 ?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="onShelfStatus = false">取 消</el-button>
            <el-button type="primary" @click="onTheShelf">确 定</el-button>
          </span>
        </el-dialog>

        <!-- 下架强提示 -->
        <el-dialog
          title="温馨提示"
          :visible.sync="offShelfStatus"
          width="20%"
          style="margin-top: 20vh"
          :before-close="handleClose">
          <span>您确定要下架此项目吗 ?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="offShelfStatus = false">取 消</el-button>
            <el-button type="primary" @click="offTheShelf">确 定</el-button>
          </span>
        </el-dialog>
        
    </div>
</template>

<script>
import {
  getRegionList,
  getProjectList,
  updateStatus
} from "@/api/overseasHouse/createOverseasHouse";
import { VueDebounce, timeChange } from "@/utils/index"

export default {
  name: "overseasProjectList",
  data() {
    return {
      onTheShelfId: '', // 上架项目的ID值
      onShelfStatus: false,
      offTheShelfId: '', // 下架项目的ID值
      offShelfStatus: false,
      noPhotoAlbum: false,
      loading: false, // 表格是否出现加载动画
      projectList: [], // 项目列表
      countryList: {}, // 国家区域列表
      propertyTypeList: [], // 物业类型
      projectStatusList: [], // 项目状态
      total: 0, // 总条数
      projectStatus: {}, // 项目状态对应表
      queryForm: {
        projectName: '', // 项目名称或ID
        country: '', // 国家
        city: '', // 区域
        propertyType: '', // 物业类型
        projectStatus: '', // 项目状态
        page: 1, // 页数
        rows: 20 // 行数
      }
    }
  },
  created() {
    let that = this
    this.getProjectList = VueDebounce(this.getProjectList, 300)
    this.onTheShelf = VueDebounce(this.onTheShelf, 300)
    this.offTheShelf = VueDebounce(this.offTheShelf, 300)
    this.getRegionList()
    this.getTypeAndStatus()
    this.getProjectList()
  },
  methods: {
    // 编辑项目
    navigateToEdit(row){
      this.$router.push({
          name: 'EditOverseas',
          query: {communityId: row.id}
      });
    },
    // 获取城市 二级联动
    getRegionList(){
      getRegionList({}).then(response => {
        if(response.code == 200){
          let countryList = response.data || {};
          this.countryList = countryList;
        }else{
          this.$message.error("城市地区数据获取失败");
        }
      })
    },
     // 选择国家
    selectCountry(){
      this.queryForm.city = '';
    },
    // 获取物业类型和项目状态
    getTypeAndStatus() {
      let that = this
      // 物业类型
      this.getDicts("op_property_type").then(response => {
        if(response.code == 200) {
          this.propertyTypeList = response.data || [];
        }else {
          this.$message.error('物业类型获取失败');
        }
      })
      // 项目状态
      this.getDicts("op_project_status").then(response => {
        if(response.code == 200) {
          this.projectStatusList = response.data || [];
          response.data.forEach((item) => {
            that.projectStatus[item.dictValue] = item.dictLabel
          })
        }else {
          this.$message.error('项目状态获取失败');
        }
      })
    },
    // 获取项目列表信息
    getProjectList() {
      this.loading = true
      getProjectList(this.queryForm).then(res => {
        if(res.code == 200) {
          res.data.list.forEach((item) => {
            item.createTime = timeChange(item.createTime)
            item.updateTime = timeChange(item.updateTime)
          })
          this.projectList = res.data.list
          this.total = Number(res.data.total)
          this.loading = false
        }else {
          this.$message.error('项目列表获取失败');
        }
      })
    },
    // 重置表格搜索数据
    resetQuery() {
      this.$refs['queryForm'].resetFields();
      this.getProjectList()
    },
    // 上架
    onTheShelf() {
      updateStatus({
        id: this.onTheShelfId,
        status: '2'
      }).then((res) => {
        if(res.code == 200) {
          this.getProjectList()
          this.onShelfStatus = false
          this.$message.success(res.msg)
        }else {
          this.$message.error(res.msg);
          this.onShelfStatus = false
        }
      })
    },
    // 隐藏没有维护相册的对话框
    handleClose() {
      this.noPhotoAlbum = false
      this.offShelfStatus = false
      this.onShelfStatus = false
    },
    // 保存上架id 同时弹出对话框
    saveOnTheShelfId(id, count) {
      this.onTheShelfId = id
      if(count) {
        this.onShelfStatus = true
      }else {
        this.noPhotoAlbum = true
      }
    },
    // 保存下架id 同时弹出对话框
    saveOffTheShelfId(id) {
      this.offTheShelfId = id
      this.offShelfStatus = true
    },
    // 下架
    offTheShelf() {
       updateStatus({
        id: this.offTheShelfId,
        status: '3'
      }).then((res) => {
        if(res.code == 200) {
          this.getProjectList()
          this.offShelfStatus = false
          this.$message.success(res.msg)
        }else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
